<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 模拟表单用户名验证</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        // 当username框失焦之后就判断输入的用户名是否合法.
        document.getElementById("username").onblur = function (){
            //1. 创建对象
            let xml = new XMLHttpRequest();
            // 2.为xml的onreadystatechange赋值
            xml.onreadystatechange = function (){
                if(xml.readyState ==4){
                     if(xml.status == 200){
                         // 此时服务器响应成功.将对应的返回值反映到span中
                             document.getElementById("usernameerror").innerHTML = xml.responseText;
                     }else{
                         alert(xml.status);
                     }
                }
            }

            // 3. 调用open方法
            xml.open("POST","/AJAX01/ajax3Request",true);

            // 4.设置请求头的类型
            xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 获取username
            let username = document.getElementById("username").value;

            // 5.调用send方法发送请求.
            xml.send("username="+username);
        }
    }

</script>

username:<input type="text" id="username"><span id="usernameerror"></span><br/>
password:<input type="password" id="password"/><span id="passworderror"> </span><br/>
</body>
</html>